<template>
  <div class="pa-4">
    <div
      v-for="item in applicationList"
      v-show="applicationList.length"
      :key="item.key"
      class="item rounded-md-l mb-3"
      @click="goTo({ name: 'application-detail', query: { subscribeId: item.subscribeId } })"
    >
      <header
        class="py-4 font-md px-3 d-flex"
        :style="
          item.style && item.style.background
            ? { background: item.style.background }
            : { borderBottom: '1px solid #f2f2f2' }
        "
      >
        <div :style="item.style && item.style.leftTextColor ? { color: item.style.leftTextColor } : ''">
          <i class="icon-menu"></i>
          <span class="d-inline-block item-subscribeId"> 申请单：{{ item.subscribeId }}</span>
        </div>
        <span :style="item.style ? { color: item.style.righTextColor } : ''">{{
          item.subscribeStatus | formatOrderStatus
        }}</span>
        <i class="icon-arrow-right text--secondary"></i>
      </header>
      <div class="pt-3 px-3">
        <div v-for="(val, index) in applicationListConfig" :key="val.key" class="item-content mb-3">
          <span class="d-inline-block">{{ val.label }} </span>
          <span v-if="val.code === 'patientName'">
            {{ item.patientName }}
            【{{ item.patientRelation | formatPatientRelation }}】
          </span>
          <span v-else-if="val.code === 'subscribeType'">{{ item.subscribeType | formatSubscribeType }}</span>
          <span v-else>{{ item[val.code] }}</span>
          <hr v-if="index === 1" />
        </div>
      </div>
      <footer v-if="item.subscribeStatus === 10101" class="pt-2">
        <van-button
          class="item-button float-right mr-2 mb-2"
          round
          type="primary"
          plain
          @click.stop="cancelSubscribe(item.subscribeId)"
        >
          取消
        </van-button>
      </footer>
    </div>
    <van-empty v-show="!applicationList.length" description="暂无申请单" />
  </div>
</template>
<script>
import { formatOrderStatusSpecial } from '@/filters';
import { setBackHomeUrl } from '@/utils/back-home-url';
import { applicationListConfig } from './utils/config';

export default {
  name: '',
  components: {},
  filter: {},
  mixins: {},
  props: {},
  async asyncData({ $lvtongApis, query }) {
    setBackHomeUrl(query);
    const applicationList = await $lvtongApis
      .getSubscribeList('')()
      .then(({ data }) => data || []);
    return { applicationList };
  },
  data() {
    return {
      applicationListConfig,
      applicationList: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.applicationList = this.applicationList.map((item) => {
      return {
        ...item,
        style: formatOrderStatusSpecial(item.subscribeStatus),
      };
    });
  },
  methods: {
    cancelSubscribe(subscribeId) {
      this.$dialog
        .confirm({
          title: '取消',
          message: '确认取消?',
        })
        .then(() => {
          this.$toast('申请成功');
          this.$$lvtongApis.cancelSubscribe(subscribeId)({ loading: true });
          this.$router.go(0);
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style scoped lang="less">
.item {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  &-subscribeId {
    width: 236px;
  }
  &-content {
    span:first-child {
      width: 70px;
      white-space: nowrap;
    }
    hr {
      border: 1px solid #f2f2f2;
      border-bottom: 0;
    }
  }
  &-button {
    height: 28px;
  }
  footer {
    border-top: 1px solid #f2f2f2;
  }
}
</style>
